<template>
	<view class="container">

		<view class="header">
			<view class="header-title">任务大厅</view>
			<view class="header-right">
				<uni-icons type="filter" size="24" color="#333" @click="handleFilter" />
			</view>
		</view>

		<view class="search-box">
			<uni-icons type="search" size="16" color="#999" />
			<input type="text" placeholder="搜索任务名称或类型" v-model="searchKey" class="search-input" />
		</view>

		<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
			<view class="category-list">
				<view v-for="(item, index) in categories" :key="index"
					:class="['category-item', currentCategory === index ? 'active' : '']"
					@click="handleCategoryChange(index)">
					{{ item }}
				</view>
			</view>
		</scroll-view>

		<scroll-view scroll-y class="task-list" @scrolltolower="loadMore" @refresherrefresh="refresh" refresher-enabled
			:refresher-triggered="isRefreshing">
			<view class="task-card" v-for="(task, index) in taskList" @click="jumpDetails()" :key="index">
				<view class="task-header">
					<view class="task-title">{{ task.title }}</view>
					<view class="task-reward">{{ task.reward }}积分</view>
				</view>
				<view class="task-desc">{{ task.description }}</view>
				<view class="task-info">
					<view class="task-difficulty">
						<uni-icons v-for="n in task.difficulty" :key="n" type="star-filled" size="14" color="#FFB800" />
						<uni-icons v-for="n in 5 - task.difficulty" :key="n + 5" type="star" size="14" color="#FFB800" />
					</view>
					<view class="task-deadline">截止时间：{{ task.deadline }}</view>
				</view>
				<view class="task-footer">
					<view class="task-publisher">
						<image :src="task.publisherAvatar" class="publisher-avatar" />
						<text class="publisher-name">{{ task.publisherName }}</text>
					</view>
					<view class="task-status">
						<text class="task-count">{{ task.currentCount }}/{{ task.maxCount }}人</text>
						<uni-button :type="task.status === '可领取' ? 'primary' : 'default'" size="mini"
							:disabled="task.status !== '可领取'" @click.stop="receiveTask(task)">{{ task.status }}</uni-button>
					</view>
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script>
import { UniIcons } from '@dcloudio/uni-ui';
export default {
	components: {
		'uni-icons': UniIcons,

	},
	data() {
		return {
			categories: ['全部', '最新发布', '高报酬', '即将截止'],
			currentCategory: 0,
			searchKey: '',
			isRefreshing: false,
			taskList: [
				{
					title: '小团团抖音直播间观看奖励',
					description: '观看小团团抖音直播间15分钟，完成互动任务',
					reward: 50,
					difficulty: 2,
					deadline: '2024-02-20',
					publisherAvatar: '',
					publisherName: '小团团官方',
					currentCount: 45,
					maxCount: 100,
					status: '可领取',
					requirement: '在直播间观看15分钟，并完成点赞、评论等互动任务',
					steps: '1. 进入直播间\n2. 观看15分钟\n3. 完成互动\n4. 截图保存观看记录',
					standard: '观看时长满15分钟，完成指定互动任务',
					rewardDesc: '任务完成后24小时内审核，通过后立即发放积分'
				},
				{
					title: '小团团抖音直播间观看奖励',
					description: '观看小团团抖音直播间20分钟，参与互动抽奖',
					reward: 100,
					difficulty: 4,
					deadline: '2024-02-25',
					publisherAvatar: '',
					publisherName: '小团团官方',
					currentCount: 8,
					maxCount: 20,
					status: '可领取',
					requirement: '观看直播20分钟，参与直播间互动并截图',
					steps: '1. 进入直播间\n2. 观看20分钟\n3. 参与抽奖\n4. 截图互动记录',
					standard: '观看时长达标，完成抽奖参与，提供有效截图',
					rewardDesc: '任务审核通过后3个工作日内发放积分'
				}
			],
			currentTab: 0
		};
	},
	methods: {
		jumpDetails() {
			uni.navigateTo({
				url: '/pages/index/task'
			});
		},
		handleCategoryChange(index) {
			this.currentCategory = index;
		},
		handleFilter() {
			uni.showToast({
				title: '筛选功能开发中',
				icon: 'none'
			});
		},
		loadMore() {
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 1000);
		},
		refresh() {
			this.isRefreshing = true;
			setTimeout(() => {
				this.isRefreshing = false;
			}, 1000);
		},
		receiveTask(task) {
			uni.showModal({
				title: '确认领取',
				content: '是否确认领取该任务？',
				success: (res) => {
					if (res.confirm) {

						uni.navigateTo({
							url: '/pages/index/task'
						});
					}
				}
			});
		},
		handleTabChange(index) {
			this.currentTab = index;
			if (index !== 0) {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			}
		},
		publishTask() {
			uni.showToast({
				title: '发布功能开发中',
				icon: 'none'
			});
		}
	}
};
</script>
<style>
page {
	height: 100%;
}

.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #F8FAFC;
}

.header {
	padding: 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FFFFFF;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.header-title {
	font-size: 20px;
	font-weight: 600;
	color: #1A1A1A;
	letter-spacing: 0.5px;
}

.search-box {
	margin: 24rpx 30rpx;
	padding: 24rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 16px;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
}

.search-input {
	margin-left: 20rpx;
	flex: 1;
	font-size: 14px;
}

.category-scroll {
	background-color: #FFFFFF;
	padding: 24rpx 0;
	white-space: nowrap;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.category-list {
	display: inline-flex;
	padding: 0 30rpx;
}

.category-item {
	padding: 16rpx 36rpx;
	margin-right: 24rpx;
	font-size: 14px;
	color: #666666;
	background-color: #F5F7FA;
	border-radius: 24px;
	transition: all 0.3s ease;
}

.category-item.active {
	background: linear-gradient(135deg, #2563EB, #3B82F6);
	color: #FFFFFF;
	box-shadow: 0 4rpx 16rpx rgba(37, 99, 235, 0.25);
}

.task-list {
	flex: 1;
	padding: 20rpx 30rpx;
	overflow: auto;
}

.task-card {
	background-color: #FFFFFF;
	border-radius: 16px;
	padding: 36rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
}

.task-card:active {
	transform: scale(0.99);
	background-color: #F8FAFC;
}

.task-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.task-title {
	font-size: 16px;
	font-weight: 600;
	color: #1A1A1A;
	line-height: 1.4;
}

.task-reward {
	font-size: 16px;
	color: #F97316;
	font-weight: 600;
	background: linear-gradient(135deg, #F97316, #FB923C);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.task-desc {
	font-size: 14px;
	color: #666666;
	margin-bottom: 20rpx;
}

.task-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.task-difficulty {
	display: flex;
	align-items: center;
}

.task-deadline {
	font-size: 12px;
	color: #999999;
}

.task-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.task-publisher {
	display: flex;
	align-items: center;
}

.publisher-avatar {
	width: 48rpx;
	height: 48rpx;
	border-radius: 24rpx;
	margin-right: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.publisher-name {
	font-size: 12px;
	color: #666666;
}

.task-status {
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx;
	border-radius: 32rpx;
}

.task-count {
	font-size: 13px;
	color: #2563EB;
	margin-right: 24rpx;
	font-weight: 600;
}

.tab-bar {
	height: 120rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: relative;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
	padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	transition: all 0.3s ease;
}

.tab-item:active {
	opacity: 0.8;
}

.tab-text {
	font-size: 13px;
	color: #666666;
	margin-top: 8rpx;
	font-weight: 500;
}

.active-text {
	color: #2563EB;
	font-weight: 600;
}

.tab-bar-center {
	width: 132rpx;
	height: 132rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-40rpx);
}

.publish-btn {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #2563EB, #60A5FA);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.35);
	transition: all 0.3s ease;
	border: 6rpx solid #FFFFFF;
}

.publish-btn:active {
	transform: scale(0.92);
	box-shadow: 0 4rpx 16rpx rgba(37, 99, 235, 0.25);
	background: linear-gradient(135deg, #1E40AF, #3B82F6);
}

.task-detail-modal {
	background-color: #FFFFFF;
	border-radius: 20px;
	width: 620rpx;
	max-height: 800rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
}

.modal-header {
	padding: 30rpx;
	border-bottom: 1px solid #EEEEEE;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-title {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
}

.modal-content {
	padding: 30rpx;
	max-height: 600rpx;
}

.detail-section {
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 16rpx;
}

.section-content {
	font-size: 14px;
	color: #666666;
	line-height: 1.5;
}

.modal-footer {
	padding: 30rpx;
	border-top: 1px solid #EEEEEE;
	display: flex;
	justify-content: center;
}

.modal-footer .uni-button {
	min-width: 320rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 6rpx 16rpx rgba(37, 99, 235, 0.2);
}
</style>
	